import { FC, useState, useEffect } from 'react';
import { Card, Space, Button } from 'antd';

// 引入高德地图
import AMapLoader from '@amap/amap-jsapi-loader';

let map: any;

const Index: FC = () => {
  useEffect(() => {
    // 初始化地图
    AMapLoader.load({
      key: '7c86b096a38b98313013a9c9ff473617', // 申请好的Web端开发者Key，首次调用 load 时必填
      version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
      plugins: [], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
    })
      .then((AMap) => {
        map = new AMap.Map('container', {
          // zoom: 14, //级别
          center: [120.26408, 30.305451], //中心点坐标
          viewMode: '3D', //使用3D视图
        });

        //实时路况图层
        // const trafficLayer = new AMap.TileLayer.Satellite({
        //   zIndex: 10,
        // });
        // map.add(trafficLayer); //添加图层到地图

        // 添加点标记
        const marker = new AMap.Marker({
          position: [120.26408, 30.305451], //位置
        });
        map.add(marker); //添加到地图
        marker.on('click', () => {
          console.log('你点击了旺田商务楼');
        }); //绑定click事件

        const lineArr = [
          [120.26408, 30.305451],
          [120.262658, 30.307836],
          [120.278623, 30.311297],
          [120.26408, 30.305451],
        ];
        const polyline = new AMap.Polyline({
          path: lineArr, //设置线覆盖物路径
          strokeColor: '#3366FF', //线颜色
          strokeWeight: 5, //线宽
          strokeStyle: 'solid', //线样式
        });
        map.add(polyline);

        var circle = new AMap.Circle({
          center: [120.26408, 30.305451], // 圆心位置
          radius: 1000, //半径
          strokeColor: '#F33', //线颜色
          strokeOpacity: 1, //线透明度
          strokeWeight: 3, //线粗细度
          fillColor: '#ee2200', //填充颜色
          fillOpacity: 0.35, //填充透明度
        });
        map.add(circle);

        // 添加缩放插件
        AMap.plugin('AMap.ToolBar', function () {
          //异步加载插件
          const toolbar = new AMap.ToolBar();
          map.addControl(toolbar);
        });
        // 添加缩放插件
        AMap.plugin('AMap.Scale', function () {
          //异步加载插件
          const scale = new AMap.Scale();
          map.addControl(scale);
        });
        AMap.plugin('AMap.Geolocation', function () {
          //异步加载插件
          const geolocation = new AMap.Geolocation();
          map.addControl(geolocation);
        });

        // 监听地图加载完毕
        map.on('complete', function () {
          // 地图图块加载完成后触发
          console.log('地图加载完毕了');
        });

        const list = [
          [120.26408, 30.305451],
          [120.262658, 30.307836],
          [120.278623, 30.311297],
        ];
        const newList = list.map(
          (item) =>
            new AMap.Marker({
              position: new AMap.LngLat(item[0], item[1]), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
              title: '北京',
              icon: 'https://vdata.amap.com/icons/b18/1/2.png',
              offset: new AMap.Pixel(-10, -10),
            }),
        );
        map.add(newList);

        // 适配地图级别
        map.setFitView();

        map.on('click', function (ev: any) {
          // 触发事件的对象
          // var target = ev.target;
          // 触发事件的地理坐标，AMap.LngLat 类型
          var lnglat = ev.lnglat;
          // 触发事件的像素坐标，AMap.Pixel 类型
          // var pixel = ev.pixel;
          // 触发事件类型
          // var type = ev.type;
          // console.log(lnglat);
          const marker = new AMap.Marker({
            position: [lnglat.lng, lnglat.lat], //位置
          });
          map.add(marker); //添加到地图

          map.remove(circle);
        });
      })
      .catch((e) => {
        console.log(e);
      });

    return () => {
      map.destroy();
    };
  }, []);

  return (
    <Space direction="vertical" style={{ display: 'flex' }}>
      <Card title="地图">
        <div id="container" style={{ height: 400 }}></div>
      </Card>
    </Space>
  );
};

export default Index;
